<!DOCTYPE html>
<html>
<head>
    <title>Using KnockoutJS with Kendo</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
            <script src="../../content/web/integration/jquery.tmpl.js"></script>
        <script src="../../content/web/integration/knockout-1.2.1.js"></script>



        <div id="example" class="k-content">
            <div id="options" class="k-widget k-header">
                <label for="ticket">Ticket class:</label>
                <select id="ticket" style="vertical-align: middle" data-bind="options: tickets,
                    optionsCaption: 'Choose...',
                    optionsText: 'name',
                    value: chosenTicket"></select>

                <label for="departure">Departure:</label>
                <input id="departure" data-bind="value: departure" />

                <label for="seat">Seat:</label>
                <input id="seat" data-bind="value: quantity" />
            </div>
            <div id="boardingpass" data-bind="template: 'ticketTemplate'"></div>
            <script id="ticketTemplate" type="text/x-jquery-tmpl">
                {{if chosenTicket}}
                    <span class="class-ticket"><b>${ chosenTicket().name }</b> ($${ chosenTicket().price }) </span>
                    <span class="class-card"><b>${ chosenTicket().name }</b></span>
                    <span class="date">${ kendo.toString(kendo.parseDate(departure()), "MM/dd/yyyy") } </span>
                    <span class="seat-ticket">${ quantity() } </span>
                    <span class="seat-card">${ quantity() } </span>
                    <button class="clear-button" data-bind="click: resetTicket">Clear</button>
                {{else}}
                    
                {{/if}}
            </script>
            <script>
                $(document).ready(function() {
                    var viewModel = {
                        tickets: [
                        { name: "Economy", price: 199.95 },
                        { name: "Business", price: 449.22 },
                        { name: "First Class", price: 1199.99 }
                        ],
                        chosenTicket: ko.observable(),
                        resetTicket: function() { this.chosenTicket(null) },
                        departure: ko.observable(new Date()),
                        quantity: ko.observable(1)
                    };

                    ko.applyBindings(viewModel);

                    $("#ticket").kendoDropDownList().trigger("change");
                    $("#ticket").bind("change", function() {
                        $(this).data("kendoDropDownList").select(this.selectedIndex);
                    });

                    $("#seat").kendoNumericTextBox({
                        min: 1,
                        max: 60,
                        format: "n0",
                        decimals: 0
                    });

                    var departure = $("#departure").kendoDatePicker().data("kendoDatePicker");

                    departure.value(kendo.parseDate(departure.element.val()));
                });
            </script>
            <style scoped>
                #options {
                	width: 660px;
                	margin: 20px auto;
                	padding: 10px;
                    background-image: none;
                    border: 1px solid inherit;
                    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.25), inset 0 0 30px rgba(0,0,0,0.07);
                    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.25), inset 0 0 30px rgba(0,0,0,0.07);
                    box-shadow: 0 1px 1px rgba(0,0,0,0.25), inner 0 0 30px rgba(0,0,0,0.07);
                    -webkit-border-radius: 8px;
                    -moz-border-radius: 8px;
                    border-radius: 8px;
                }
                #options label {
                	padding-left: 5px;
                }                
                #boardingpass {
                	width: 575px;
                	min-height: 270px;
                	margin: 20px auto;
                	position: relative;
                	background: url('../../content/web/integration/boardingPass.png') transparent no-repeat 0 0;
                }
                
                .class-ticket {
                    position: absolute;
                    margin: 26px 0 0 45px;	
                }
                
                .class-card {
                    position: absolute;
                    margin: 58px 0 0 430px;	
                }
                
                .date {
                    position: absolute;
                    margin: 58px 0 0 45px;	
                }
                
                .seat-ticket {
                    position: absolute;
                    margin: 58px 0 0 270px;	
                }
                
                .seat-card {
                    position: absolute;
                    margin: 58px 0 0 530px;	
                }
                
                .clear-button {
                    position: absolute;
                    margin: 240px 0 0 0;	
                }
            </style>
        </div>

</body>
</html>
